<template>
	<view class="order">
		<u-list :height="listHeight" @scrolltolower="getList" @refresherrefresh="refresherrefresh"
			:refresherEnabled="true" :refresher-triggered="isPull" refresher-background="#F2F4F6"
			refresher-threshold="50">
			<nt-card v-for="(orderInfo,index) in list" :key="index">
				<view @tap="gotoDetail(orderInfo)">
					<view class="order-title h_title" @tap.stop="makePhoneCall(orderInfo.customerphone)">
						姓名：{{ orderInfo.customername }} {{orderInfo.customerphone}}
						<text class="h_text" v-if="orderInfo.urgent"></text>
						<u-tag :text="orderInfo.urgent_text" plain size="mini" type="error"></u-tag>
						<text class="h_text"></text>
						<u-tag :text="orderInfo.utype" plain size="mini"></u-tag>
						<text class="h_text"></text>
						<u-tag :text="orderInfo.ctype" type="warning" plain size="mini"> </u-tag>
						<view class="copy-text" style="font-size: 24rpx;"
							@tap.stop="copyClick(orderInfo.customername,orderInfo.customerphone,orderInfo.address)">
							复制
						</view>
					</view>
					<view class="order-title">地址：{{orderInfo.address}}</view>
					<view class="order-content">
						<view class="order-content__item">
							<view class="order-content__item--label">所属师傅：</view>
							<view class="order-content__item--right">{{ orderInfo.returnworker_username || "--" }}
							</view>
						</view>
						<view class="order-content__item">
							<view class="order-content__item--label">师傅备注：</view>
							<view class="order-content__item--right">{{ orderInfo.worker_return_apply_coutent || "--" }}
							</view>
						</view>
						<view class="order-content__item">
							<view class="order-content__item--label">{{orderInfo.is_type}}师傅·：</view>
							<view class="order-content__item--right">{{ orderInfo.remarks || "--" }}</view>
						</view>
					</view>
					<view class="order-tips">
						<view class="tips-item" v-for="item in orderInfo.appendFieldList" :key="item.label"
							:style="getStyle(item)">
							<text class="label">
								{{item.label}}：
							</text>
							<text class="content">
								{{item.value}}
							</text>
						</view>
					</view>
				</view>
			</nt-card></u-list>
	</view>
</template>

<script>
	import {
		getWorkerRealorderSelect,
		getWorkerOrderSelect
	} from '@/api'
	export default {
		async mounted() {
			const that = this
			await this.getList()
			this.$emit('getCount')
			this.getHeight()
		},
		props: {
			param: {
				type: Object,
				default: () => {}
			},
			funtype: ""
		},
		data() {
			return {
				orderInfo: {},
				params: {
					page: 1,
					limit: 10,
				},
				listHeight: 100,
				list: [],
				isPull: "",
				isNext: true,
			}
		},
		methods: {
			gotoDetail(item) {
				this.nav(`/subpackage/order/pages/_id?id=${item.id}`)
			},
			copyClick(name, phone, address) {
				// let name = this.data.customername
				// let phone = this.data.customerphone
				// let address = this.data.address
				let copyData = name + ' ' + phone + ' ' + address
				uni.setClipboardData({
					data: copyData,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功',
						})
					}
				});
			},
			getHeight() {
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await this.$nextTick()
							uni.createSelectorQuery().selectAll('.order').boundingClientRect(
								res => {
									// 获取列表定位
									this.listHeight = windowHeight - res[0].top
								}).exec()
						})

					}
				})
			},
			refresherrefresh() {
				this.isPull = true
				this.isNext = true;
				this.init()
			},
			init() {
				this.list = []
				this.params.page = 1
				this.limit = 10
				this.isNext = true;
				this.getList()
			},
			async getList() {
				try {
					if (!this.isNext) return;
					const params = {
						...this.params,
						...this.param
					}
					let {
						code,
						data: {
							data: list
						},
						total
					} = this.funtype === 'myfix' ? await getWorkerRealorderSelect(params) : await getWorkerOrderSelect(
						params)
					this.list = [...this.list, ...list]
					this.params.page = ++this.params.page
					if (this.list.length >= total) {
						this.isNext = false
					}
					this.isPull = false
				} catch (e) {
					this.isPull = false
				}
			},
			getStyle(item) {
				return item.style
			}
		}
	}
</script>

<style scoped lang="scss">
	.order {
		.copy {
			background: var(--theme-color);
			color: #fff;
			font-size: 24rpx;
			display: inline-block;
			padding: 0 10rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 4rpx;
			margin-left: 20rpx;
		}

		/deep/ .nt-card {
			border-radius: 20rpx;
		}

		&-title {
			font-weight: bold;
			color: #333;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.h_title {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.h_text {
				margin-left: 5px;
			}
		}

		&-content {
			background: #F5F5F5;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			&__item {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				color: #666;
				font-size: 24rpx;
				line-height: 2;

				&--label {
					width: 140rpx;
				}

				&--right {
					display: flex;
					flex: 1;
					justify-content: space-between;
				}
			}
		}
	}

	.order-tips {
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;

		.tips-item {
			.content {
				color: #F00
			}
		}
	}

	::v-deep .nt-card {
		border-bottom: 1px solid #dadce0;
	}

	.copy-text {
		background-color: #2D7FFD;
		color: #fff;
		line-height: 44rpx;
		padding: 0 10rpx;
		margin-left: 10rpx;
	}
</style>